<template>
<div class="page-container"  style="align:center">
    <div class="common-content">
        <el-form>
            <el-form-item label="搜索默认词：" prop="defaultTerm">
                <el-input type="textarea" placeholder="请输入内容" autosize style="width:800px" v-model.trim="dataForm.defaultTerm" maxlength="50"></el-input><br>
                <span>搜索默认词设置后，将显示在PC端商城搜索框下面，前台点击时直接作为关键词进行搜索，多个关键词间请用半角逗号 "," 隔开</span>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addDefault()">确认提交</el-button>
            </el-form-item>
      </el-form>
    </div>
      <div class="common-content">
        <el-form >
            <el-form-item label="搜索预制词：" prop="premadeTerm">
                <el-input type="textarea" placeholder="请输入内容" autosize style="width:800px" v-model.trim="dataForm.premadeTerm" maxlength="50"></el-input><br>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addPrefabricated()">确认提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';

//二.数据输出区
export default {

    //===== 注册组件 =====
    components: {
        jicTable,
    },

    //===== 数据初始化区=====
    data() {
        return {

          // 新增编辑界面数据
          dataForm: {
            defaultTerm: null,
            premadeTerm: null,
          },

            //===== 公共数据初始化 =====
            pageIndex: 0, //当前页数：首页；
            pageSize: 10, //每页记录数：10条记录；
            totalSize: 0, //总记录数：返回数据总条数
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [], // 表格列表数据
            searchSize: 'mini',
          // rules: {
          //   defaultTerm: [{required: true, message: "默认词不可为空", trigger: "change"}],
          //   premadeTerm: [{required: true, message: "预制词不可为空", trigger: "change"}],
          // },
            //dialogVisible: false, //// 是否显示弹窗内容;
            //editDialogVisible1: false,//// 是否可编辑弹窗内容;
            //editLoading: false,////是否显示加载时动画效果;
        }
    },

    //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
    mounted() {
        // this.findPage();
      this.resetForm();
    },

    //=====Vue.js 方法区=====
    methods: {
      //默认提交
      addDefault(){
          let this_=this;
          if (this_.dataForm.defaultTerm == null){
            this_.$message({message: "输入框不可为空", type: "warning"});
            return false;
          }else {
            this.utils.request.saveSysSearchTerm(this_.dataForm, function (res) {
              if (res.code == "0000") {
                this_.$message({
                  message: "操作成功",
                  type: "success"
                });
                this_.resetForm()
              } else {
                this_.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
            });
          }
        },

      //预制提交
      addPrefabricated(){
        let this_=this;
        // debugger
        if (this_.dataForm.premadeTerm == null){
          this_.$message({message: "输入框不可为空", type: "warning"});
          return false;
        }else {
          this.utils.request.saveSysSearchTerm(this_.dataForm, function (res) {
            if (res.code == "0000") {
              this_.$message({
                message: "操作成功",
                type: "success"
              });
              this_.resetForm();
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          });
        }
      },
        //1.查询按钮：查询列表数据
        // findPage(pageNum) {
        //     传过滤器的参数
            // let this_ = this;
            // if (this_.searchFilters === undefined || this_.searchFilters === null) {
            //     this_.searchFilters = {};
            // }
            //
            // this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
            // this_.searchFilters.pageSize = this.pageRequest.pageSize;
            // this.utils.request.findSysSearchTermPage(this_.searchFilters, function (res) {
            //     if (res.code === "0000") {
            //         this_.tableList = res.data.list;
            //         this_.totalSize = Number(res.data.total);
            //     } else {
            //         this_.tableList = [];
            //         this_.totalSize = 0;
            //     }
            // });
        // },

        // 2.重置按钮：无条件查询搜索框条件
        resetForm(formName) {
            this.dataForm = {};
            // this.findPage(null);
        },

        // 3.详情按钮对应的方法
        handleDetail(params) {
            this.$router.push({
                path: "/BudgReportPointNormalDetail/",
                query: {
                    id: params.row.id,
                    disabled: true
                }
            });
        },

        // 4.编辑按钮对应的方法
        handleEdit(params) {
            this.$router.push({
                path: "/BudgReportPointNormalDetail/",
                query: {
                    id: params.row.id,
                    disabled: false
                }
            });
        },

        // 5.跳转到新增记录页面；
        addForm(params) {
            params = {
                row: {
                    id: null
                }
            };
            this.$router.push({
                path: "/BudgReportPointNormalDetail/",
                query: {
                    id: params.row.id,
                    disabled: false
                }
            });
        },
        // 6.每页记录数发生变化
        handleSizeChange(params) {
            this.pageRequest.pageSize = params.size;
        },

        // 7.请求页数发生变化
        handlePageChange(params) {
            this.pageRequest.pageNum = params.number;
            this.findPage();
        },
        // 8.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },

        // 9.关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },

        // 10.删除按钮：删除选中的记录
        handleDelete(data) {
            this.utils.request.deleteBudgReportPointNormal({
                id: data.row.id
            }, res => {
                if (res.data) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.findPage();
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'warning'
                    });
                }
            });
        }
        //==========Vue.js自定义方法区==========

    },
}
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-form-item__content {
            height: 32px;
            line-height: 32px;
            width: 150px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 150px;
        }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}
</style>
